<template>
    <div class="container">
        <el-row type="flex" justify="space-between">
            <!-- 订单表单 -->
            <div class="main">
                <!-- 监听子组件通过this发出的事件，只能在父组件中使用子组件的位置进行监听 -->
                <OrderForm v-if='flightInfo.insurances' :data='flightInfo' @getPrice='dealPrice'/>
            </div>

            <!-- 侧边栏 -->
            <div class="aside">
                <!-- 父传子，如果传递给子组件中通过props定义的成员，必须在父 组件中使用子组件的位置进行动态赋值 -->
                <OrderAside v-if='flightInfo.insurances' :data='flightInfo' :totalPrice='price'/>       
            </div>
        </el-row>
    </div>
</template>

<script>
import OrderForm from "@/components/air/orderForm.vue";
import OrderAside from "@/components/air/orderAside.vue";
export default {
    data () {
        return {
            flightInfo:{},
            price:''
        }
    },
    methods: {
        dealPrice(data){
            this.price = data
        }
    },
    components: {
        OrderForm,OrderAside
    },
    mounted(){
       let {id,seat_xid} = this.$route.query
        // JiPiao - 选择机票 http:127.0.0.1:1337/airs/:id
        this.$axios({
            url:`/airs/${id}`,
            params:{seat_xid}
        }).then(res => {
            console.log(res)
            this.flightInfo = res.data
        })
    }
}
</script>

<style lang="less" scoped>
    .container{
        width:1000px;
        margin:20px auto;
    }
    
    /*aside*/
    .aside{
        width: 350px;
        height: fit-content;
        border:1px #ddd solid;
    }
</style>